<template>
  <el-dialog
    v-model="showDialog"
    :title="title"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="60%"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    destroy-on-close
    align-center
  >
    <el-form :model="form" label-width="120px" ref="formRef">
      <el-row justify="start">
        <el-col :span="24">
          <el-form-item label="所属元数据">
            <el-input disabled v-model="meta" />
          </el-form-item>
          <el-form-item
            label="字段标识"
            :rules="{
              required: true,
              trigger: ['blur', 'change'],
              message: '请填写字段标识',
            }"
            prop="name"
          >
            <el-input :disabled="updated" v-model="form.name" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="字段名称"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写字段名称' }"
            prop="fieldDesc"
          >
            <el-input v-model="form.fieldDesc" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="字段类型"
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择字段类型' }"
            prop="fieldDesc"
          >
            <el-select v-model="form.fieldType" placeholder="请选择字段类型">
              <el-option
                v-for="item in fieldTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.fieldType == 'classify' || form.fieldType == 'label'">
          <el-form-item :label="form.fieldType == 'classify'?'分类Code':'标签Code'" prop="classifyCode">
            <el-input v-model="form.classifyCode" />
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.fieldType == 'file'">
          <el-form-item label="文件类型" prop="fileFormat">
            <el-select
              v-model="form.format"
              multiple
              filterable
              allow-create
              default-first-option
              :reserve-keyword="false"
              placeholder="请选择文件上传类型"
              :fit-input-width="true"
              style="width: 100%"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="meta.indexOf('图书') > -1">
          <el-form-item label="字段分类">
            <el-select v-model="form.classify" placeholder="请选择图书字段分类">
              <el-option
                v-for="item in bookFieldClassify"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="排序" prop="displaySort">
            <el-input type="number" v-model="form.displaySort" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="必填" prop="remark">
            <el-switch v-model="form.required" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="列表展示" prop="remark">
            <el-switch v-model="form.displayList" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="是否排序" prop="sorted" >
            <el-switch v-model="form.sorted" />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="导航展示" prop="remark">
            <el-switch v-model="form.navigational" />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="是否检索" prop="remark">
            <el-switch v-model="form.searched" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="是否下载" prop="remark">
            <el-switch v-model="form.download" />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="是否外壳管理" prop="remark">
            <el-switch v-model="form.shelled" />
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="停用" prop="remark">
            <el-switch v-model="form.deleted" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="saveForm">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import * as MetaApi from '@/api/meta'

const meta = ref('')
const activeId = ref(0)
const updated = ref(false)
const title = ref('添加字段')
const showDialog = ref(false)
const fieldTypeList = ref([])

const formRef = ref()

const form = ref({})

const bookFieldClassify = ref([])

const fieldParams = reactive({
  pageNo: 1,
  pageSize: 50,
  fieldDesc: '',
  classify: '',
  createTime: []
})

const checkCode = (rule, value, callback) => {
  if (value) {
    let rgx = /^[A-Za-z]+$/
    if (value.match(rgx) == null) {
      return callback(new Error('请检查输入格式，不能为空，且必须为字母'))
    } else {
      callback()
    }
  }
}

const displayed = (f) => {
  if (
    f == 'string' ||
    f == 'number' ||
    f == 'date' ||
    f == 'datetime' ||
    f == 'classify' ||
    f == 'image'
  ) {
    return true
  } else {
    return false
  }
}

const openDialog = async (name, id) => {
  activeId.value = id
  title.value = '添加字段'
  updated.value = false
  meta.value = name
  showDialog.value = true
}
const closeDialog = () => {
  showDialog.value = false
  form.value = {}
}
const updateDialog = async (id, name) => {
  title.value = '修改字段'
  showDialog.value = true
  meta.value = name
  updated.value = true
  form.value = await MetaApi.selectFieldOne(id)
}
const options = [
  {
    value: 'doc',
    label: 'doc'
  },
  {
    value: 'docx',
    label: 'docx'
  },
  {
    value: 'xls',
    label: 'xls'
  },
  {
    value: 'xlsx',
    label: 'xlsx'
  },
  {
    value: 'pdf',
    label: 'pdf'
  },
  {
    value: 'xml',
    label: 'xml'
  },
  {
    value: 'html',
    label: 'html'
  },
  {
    value: 'epub',
    label: 'epub'
  },
  {
    value: 'mobi',
    label: 'mobi'
  },
  {
    value: 'indd',
    label: 'indd'
  }
]
const saveForm = async () => {
  if (updated.value) {
    console.log('修改字段')
    await MetaApi.updateField(form.value, form.value.id)
    await selectField(fieldParams, form.value.tableId)
  } else {
    console.log('添加字段')
    await MetaApi.addField(form.value, activeId.value)
    await selectField(fieldParams, activeId.value)
  }
  form.value = {}
  showDialog.value = false
}
const selectField = inject('selectField')

const getClassify = async () => {
  const data = await MetaApi.getBookFieldClassify()
  bookFieldClassify.value = data
}
const getType = async () => {
  fieldTypeList.value = await MetaApi.selectFieldType()
}

defineExpose({
  openDialog,
  updateDialog
})

/** 初始化 **/
onMounted(() => {
  getClassify()
  getType()
})
</script>
